<template>
  <main>
    <top :run="run" />
    <div class="wrap">
      <center v-if="Object.keys(topData).length" :top-data="topData" />
      <bottom v-if="Object.keys(topData).length" :model-dom="modelDom" :left-data="leftData" />
    </div>
  </main>
</template>

<script>
import { getModelTop, getModelLeft } from '@/api/dataScreen'
import { mapGetters } from 'vuex'
import Top from './components/Top.vue'
import Center from './components/Center'
import Bottom from './components/Bottom'
export default {
  components: {
    Top,
    Center,
    Bottom
  },
  data() {
    return {
      modelDom: '',
      topData: {},
      leftData: {},
      run: 0,
      timer: null
    }
  },
  computed: {
    ...mapGetters([
      'stationId',
      'model'
    ])
  },
  watch: {
    stationId() {
      this.getModelTop()
      this.getModelLeft()
      this.getModelCode()
      this.timer = setInterval(() => {
        this.getModelTop()
        this.getModelLeft()
        this.getModelCode()
      }, 5000)
    }
  },
  created() {
    if (this.stationId) {
      this.getModelTop()
      this.getModelLeft()
      this.getModelCode()
      this.timer = setInterval(() => {
        this.getModelTop()
        this.getModelLeft()
        this.getModelCode()
      }, 5000)
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    // 获取模型图上方数据
    getModelTop() {
      getModelTop(this.stationId).then(res => {
        if (res.code === 1000) {
          this.topData = res.data
          this.run = res.data.run
        }
      })
    },
    // 获取模型图左侧数据
    getModelLeft() {
      getModelLeft(this.stationId).then(res => {
        if (res.code === 1000) {
          this.leftData = res.data
        }
      })
    },
    getModelCode() {
      fetch(this.model).then(res => res.text()).then(data => {
        this.modelDom = data
        // console.log(this.modelDom)
        // this.$nextTick(() => {
        //   this.initSvg()
        //   this.move()
        // })
      })
    }
  }
}
</script>

<style scoped lang="scss">
main {
    height: 100%;
    background: url('../../assets/bg.jpg') no-repeat;
    background-size: 100% 100%;
    .wrap {
        height: calc(100% - 78px);

    }
}
</style>
